<template>
	<!-- 地址列表 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model+' '+(model=='light'?'p-stickyLight':'')">
			<view class="status_bar">
		
			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.m075}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="h24">
			
		</view>
		<!-- 地址列表为空 -->
		<template v-if="list.length==0">
			<view class="f0 flex justify-center emptyWrap">
				<image src="/static/images/listEmpty.png" mode=""></image>
			</view>
			<view class="desc text-alignC A-Medium" :class="model=='light'?'descLight':''">
				{{i18n.m076}}
			</view>
			<view class="operate text-alignC A-Regular">
				{{i18n.m077}}
			</view>
		</template>
		<!-- 地址列表 -->
		<view v-else v-for="(item,index) in list" :key="index" class="listWrap A-Regular mx-3 px-3 pt-3 mb-3" :class="model=='light'?'listWrapLight':''">
			<view class="flex align-center justify-between">
				<view class="area">
					<!-- {{item.nationality_dictText}}· -->
					{{item.province}}{{item.city}}
				</view>
				<view class="number" :class="model=='light'?'':'A-Medium'">
					{{item.postCode}}
				</view>
			</view>
			<view class="adress A-Medium" :class="model=='light'?'adressLight':''">
				{{item.detailAddress}}
			</view>
			<view class="flex align-center">
				<view class="name" :class="model=='light'?'nameLight':''">
					{{item.realSurname}}{{item.realName}}
				</view>
				<view class="phone">
					{{item.mobileNumber}}
				</view>
				<view class="email">
					{{item.email}}
				</view>
			</view>
			<view class="border mt-3 mb-3" :class="model=='light'?'borderLight':''">
				
			</view>
			<view class="flex align-center justify-between">
				<!-- 设为默认 -->
				<view class="flex align-center setDefault">
					<view class="f0">
						<image v-if="item.defaultAddress=='是'" :src="'/static/images/select_'+model+'.png'" mode=""></image>
						<image v-else :src="'/static/images/unselect_'+model+'.png'" mode=""></image>
					</view>
					<view @click="setDefault(item)" class="text">
						{{i18n.m078}}
					</view>
				</view>
				<!-- 删除修改 -->
				<view class="flex align-center">
					<view @click="del(item)" class="delOrUpdate" :class="model=='light'?'delOrUpdateLight':''">
						{{i18n.m079}}
					</view>
					<view @click="edit(item)" class="delOrUpdate" :class="model=='light'?'delOrUpdateLight':''">
						{{i18n.m080}}
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮占位置 -->
		<view class="h190">
			
		</view>
		<view :class="model+'-wrap'+' '+'pb0'">
			<!-- 新增地址信息 -->
			<view @click="$tool.navTo('/pages/mine/editAddress')" class="btn mx-auto A-Medium clickCss">
				{{i18n.m081}}
			</view>
		</view>
		<modelP :type="1" ref="modelP" @confirm="confrim"></modelP>
	</view>
</template>

<script>
	import {
		addressInfoList,
		setDefaultAddress,
		addressInfoDelete
	} from '@/core/api/user.js';
	import modelP from '@/components/modelP.vue';
	export default {
		components:{
			modelP
		},
		data(){
			return{
				pageNo:1,
				pageSize:10,
				list:[],
				delItem:'',
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		computed: {
			i18n() {
				return this.$t('mine');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			uni.removeStorageSync('editInfo');
			this.pageNo=1;
			this.getAddressInfoList();
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		onReachBottom() {
			this.pageNo++;
			this.getAddressInfoList();
		},
		methods:{
			edit(item){
				uni.setStorageSync('editInfo',item);
				this.$tool.navTo('/pages/mine/editAddress');
			},
			del(item){
				console.log('del')
				this.delItem = item;
				this.$refs.modelP.open();
			},
			confrim(){
				addressInfoDelete({
					id:this.delItem.id
				}).then(res=>{
					this.pageNo=1;
					this.getAddressInfoList();
				}).catch(err=>{
					
				})
			},
			getAddressInfoList(){
				addressInfoList({
					pageNo:this.pageNo,
					pageSize:this.pageSize,
					"mobileUserId":uni.getStorageSync('mobileUserId')
				}).then(res=>{
					let list = res.result.records;
					if(this.pageNo==1){
						this.list = list;
					}else{
						if(list.length==0){
							this.pageNo--;
						}else{
							this.list.push(...list);
						}
					}
				})
			},
			setDefault(item){
				setDefaultAddress({
					id:item.id,
					"mobileUserId": uni.getStorageSync('mobileUserId'),
				}).then(res=>{
					this.pageNo=1;
					this.getAddressInfoList();
				})
			}
		}
	}
</script>
<style>
	
</style>
<style scoped lang="scss">
	.p-stickyLight {
		background: #fff;
	}
	.h24 {
		height: 24rpx;
	}
	.h190 {
		height: 190rpx;
	}
	.emptyWrap {
		margin-top: 150rpx;
		image {
			width: 312rpx;
			height: 321rpx;
		}
	}
	.desc {
		margin-top: 42rpx;
		margin-bottom: 12rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
	.descLight {
		color: #0E0F11;
	}
	.operate {
		font-size: 24rpx;
		color: #7F838D;
	}
	.listWrap {
		padding-bottom: 22rpx;
		background: #16181C;
		border-radius: 30rpx;
		.border {
			height: 2rpx;
			background: #1F2128;
		}
		.borderLight {
			background: #F4F4F4;
		}
		.area {
			font-size: 28rpx;
			color: #7F838D;
		}
		.number {
			font-size: 28rpx;
			color: #7F838D;
		}
		.adress {
			margin: 12rpx 0;
			font-size: 32rpx;
			color: #F7F7F7;
		}
		.adressLight {
			color: #0E0F11;
		}
		.name {
			font-size: 28rpx;
			color: #AAACB8;
		}
		.nameLight {
			color: #47474A;
		}
		.phone {
			margin: 0 16rpx;
			font-size: 28rpx;
			color: #7F838D;
		}
		.email {
			font-size: 28rpx;
			color: #7F838D;
		}
		.setDefault {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			.text {
				font-size: 28rpx;
				color: #AAACB8;
			}
		}
		.delOrUpdate {
			margin-left: 42rpx;
			font-size: 28rpx;
			color: #7F838D;
		}
		.delOrUpdateLight {
			color: #B5B7BF;
		}
	}
	.listWrapLight {
		background: #fff;
	}
	.pb0 {
		width: 100%;
		position: fixed;
		bottom: 0;
		min-height: 0;
		height: 190rpx;
		.btn {
			width: 690rpx;
			height: 84rpx;
			background: #5951BA;
			border-radius: 74rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}
</style>